<script setup>
import * as monaco from 'monaco-editor'
import { ref, onMounted, watch } from 'vue'
import { useCounterStore } from '../stores/content'

const store = useCounterStore()

watch(() => store.path, (newValue, oldValue) => {
    console.log(newValue)
    fileRead(newValue)
})
let editor = null
const fileRead = (path) => {
    fetch(`/content${path}`, { method: "GET" }).then(res => { return res.text() }).then(data => {
        editor.setValue(data)
    })
}
onMounted(() => {
    let elem = document.getElementById("editor")
    if (!elem) return
    editor = monaco.editor.create(elem, {
        automaticLayout: true,
        language: 'go',
    });
})
onMounted(() => {
    window.addEventListener('hashchange', (event) => {
        console.log('History changed:', event);
    });
    window.addEventListener('popstate', (event) => {
        console.log('History changed:', event);
    });
})
</script>
<template>
    <div id="editor"></div>
</template>